<template>
  <page-frame>
    <div class="service-plan" style="position: relative;">
      <div class="toptitle">
        <div class="left" style="padding-bottom:1px;">服务计划</div>
        <div class="right" style="z-index: 12;position: absolute;right:0px;margin-bottom: 5px;">
          <div class="btns">
            <el-badge :value="count" class="item" style="margin-right:10px;">
              <el-button @click="remind">提醒</el-button>
            </el-badge>
            <el-button  @click="reminder" class="lightGreenBtn">到期提醒</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <!--<div>{{$data.queryData}}</div>-->
      <div class="file-main">
        <div class="input">
          <el-row class="query">
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="fileId" @change="selectItem" @clear = "clearItem" clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item" v-show="fileId==1">
                <el-input v-model="queryData.memberNo" @keyup.enter.native="query" placeholder="请填写会员编号">
                </el-input>
              </div>
              <!--<div class="input-item" v-show="fileId==2">-->
                <!--<el-autocomplete v-model="memberView.memberName" :fetch-suggestions="querySearchAsync" placeholder="请输入会员姓名" @select="handleSelect"></el-autocomplete>-->
              <!--</div>-->
              <div class="input-item" v-show="fileId==2">
                <el-input v-model="queryData.memberName" @keyup.enter.native="query" placeholder="请填写会员编号">
                </el-input>
              </div>
              <div class="input-item" v-show="fileId==3">
                <el-select placeholder="请选择新照护等级" @change="query" v-model="queryData.lid">
                  <el-option
                    v-for="item in careLevelOptions"
                    :label="item.lname"
                    :value="item.lid">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
                <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
            </el-col>
            <!--<el-col :span="5" style="margin-top:20px;">-->
              <!--<el-badge :value="count" class="item">-->
                <!--<el-button size="small" @click="remind">提醒</el-button>-->
              <!--</el-badge>-->
            <!--</el-col>-->
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            style="width: 100%">
            <el-table-column
              prop="memberNo"
              label="会员编号"
            >
            </el-table-column>
            <el-table-column
              prop="memberName"
              label="会员"
            >
            </el-table-column>
            <el-table-column
              prop="lidName"
              label="照护等级"
            >
            </el-table-column>
            <el-table-column
              prop="comboNames"
              label="服务套餐"
            >
            </el-table-column>
            <el-table-column
              prop="cycle"
              label="服务周期"
              width="220"
            >
            </el-table-column>
            <el-table-column
              prop="statusName"
              label="当前状态"
            >
            </el-table-column>
            <el-table-column
              prop="remainingDays"
              label="剩余天数"
            >
            </el-table-column>
            <el-table-column
              prop="operating"
              label="操作"
              width="180"
            >
              <template scope="scope">
                <el-button v-if="scope.row.status==2" type="text" size="small" @click.stop="adjustment(scope.row)">调整</el-button>
                <el-button v-if="scope.row.status==1" type="text" size="small" @click.stop="makeServicePlan(scope.row)">制定服务计划</el-button>
                <el-button v-if="scope.row.status==3" type="text" size="small" @click.stop="makeServicePlan(scope.row)">重新制定服务计划</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!--到期提醒弹框-->
      <el-dialog title="到期提醒设置" :visible.sync="reminderSet" size="tiny" :close-on-click-modal="false">
        <el-form>
          <el-form-item label="提前日期" prop="shift" :label-width="formLabelWidth">
            <el-col :span="18">
              <el-input v-model="exp"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reminderSet = false">取 消</el-button>
          <el-button type="primary" @click="getExpiration">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </page-frame>
</template>

<script>
  import servicePlanApi from '../../service/serManagement/servicePlanApi';
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi'
  export default {
    methods: {
      init(){
        this.loadTableData(1);
        this.getCareLevel();
//        this.getAllMember();
        this.getServicePlanCount();
      },
      /**
       * 获取计划提醒数目
       */
      getServicePlanCount(){
        servicePlanApi.getReminderServicePlanCount().then(
          (response)=>{
            this.count = response.data.data.msg;
          }
        );
      },
      /**
       * 点击提醒按钮
       */
      remind(){
        this.queryData.isRemind = 1;
        this.getServicePlanCount();
        this.loadTableData(1);
      },
      /**
       * 加载表格数据
       */
      loadTableData(pageNum){
        let self = this;
        servicePlanApi.getServicePlanList(10,pageNum,self.queryData).then(
          (response)=>{
            if(response.data.data==''){//数据为空
              self.tableData=[];
              self.total = 0;
            } else{//不为空
              self.tableData = response.data.data.list;
              self.total = response.data.data.total;
              for(let i=0;i<self.tableData.length;i++){
                //服务周期
                if(self.tableData[i].dateStart==''||self.tableData[i].dateEnd==''){
                  self.tableData[i].cycle = '';
                }else{
                  self.tableData[i].cycle = self.tableData[i].dateStart.substring(0,10)
                    +" 至 "
                    + self.tableData[i].dateEnd.substring(0,10);
                }

                //照护等级
                for(let j=0;j<self.careLevelOptions.length;j++){
                  if(self.careLevelOptions[j].lid==self.tableData[i].lid){
                    self.tableData[i].lidName = self.careLevelOptions[j].lname;
                  }
                }
                //计划状态
                if(self.tableData[i].status==1){
                  self.tableData[i].statusName = '待生效';
                }else if(self.tableData[i].status==2){
                  self.tableData[i].statusName = '生效';
                }else{
                  self.tableData[i].statusName = '已失效';
                }
              }
            }
          }
        );
      },
      /**
       * 选择项目
       */
      selectItem(){
        //清空选项
        this.queryData.isRemind = 0;
        this.queryData.memberNo='';
        this.memberView.memberName='';
        this.queryData.memberName="";
        this.queryData.lid=null;
        this.queryData.memberId = null;
      },
      /**
       * 清空按钮触发
       */
      clearItem(){
        this.selectItem();
      },
      /**
       * 设置到期提醒
       */
      getExpiration(){
        let self = this;
        servicePlanApi.getExpiration(self.exp).then(function (response) {
          self.reminderSet = false;
          self.$message({
            message: '设置成功！',
            type: 'success'
          });
          self.loadTableData(1);
        })
      },
      /**
       * 搜索
       */
      query(){
        this.queryData.isRemind = 0;
        this.loadTableData(1);
      },
      /**
       * 调整服务计划
       */
      adjustment(row){//调整服务计划
        this.$router.push({name:"servicePlan",params:{way:0,rowObj:row}});
      },
      /**
       * 制定服务计划
       */
      makeServicePlan(row){//制定服务计划
        this.$router.push({name:"servicePlan",params:{way:1,rowObj:row}});
      },
      /**
       * 到期提醒
       */
      reminder(){
        this.reminderSet = true;
      },
      /**
       * 筛选会员
       */
//      querySearchAsync(queryString, cb) {
//        console.debug(cb);
//        var members = this.members;
//        var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;
//
//        clearTimeout(this.timeout);
//        this.timeout = setTimeout(() => {
//            cb(results);
//        console.debug(results);
//      }, 1000);
//      },
//      createStateFilter(queryString) {
//        return (state) => {
//          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
//        };
//      },
//      handleSelect(item) {
//        this.memberInfor = item;
//        this.queryData.memberId = item.memberId;
//      },
      /**
       * 获得所有会员
       */
//      getAllMember(){
//        let self = this;
//        outRegistrationApi.getAllMemberInfor(self.memberView).then(function (response) {
//          self.members = response.data.data;
//          for(var i=0;i<self.members.length;i++){
//            self.members[i].value = self.members[i].memberName;
//          };
//        })
//      },
      /**
       * 获得照护等级
       */
      getCareLevel(){
        servicePlanApi.getCareLevel().then(
          (response)=>{
            this.careLevelOptions = response.data.data;
          }
        );
      },
      /**
       * 分页相关函数
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData(this.currentPage);
      },
    },
    watch:{
//      memberView:{
//        handler(curVal){
//          if(curVal.memberName==''){
//
//          }
//        },
//        deep:true
//      }
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        count:0,
        formLabelWidth:'80px',
        exp:0,
        reminderSet:false,
        queryData:{
          isRemind: 0,
          memberNo: "",
          memberId: null,
          memberName:"",
          lid:null,
        },
        fileId:1,
        fileList:[{
          fileId: 1,
          fileName: "会员编号"
        },{
          fileId: 2,
          fileName: "会员姓名",
        },{
          fileId: 3,
          fileName: "照护等级",
        },],
        memberView:{
          memberName: ""
        },
        members:[],
        memberInfor:{},
        careLevelOptions:[],
        tableData: [],
        total:0,
        currentPage: 1,
      }
    },

  }
</script>
<style>

  .input .btns{
    float:none!important;
    display:inline-block;
  }
  .el-input{
    width: 80%;
  }
  .input input{
    display: inline-block;
  }
  .el-pagination{
    margin-right:0!important;
    padding-right:0!important;
  }
  .el-select {
    display: block;
    position: relative;
  }
  .service-plan .el-dialog--tiny{
    /*width: 20%;*/
  }
  .service-plan .el-autocomplete{
    width:100%;
  }
</style>



